<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.i-multi-choice-arrow {
border: 1px solid;
float: left;
font-size: 11px;
height: 15px;
padding: 0 0 0 4px;
text-decoration: none;
width: 216px;
background: white url('/design/Basic/images/arrow_multichoice.gif') no-repeat right top;
border-color: #ABABAB;
color: black;
}
-->
</style></head>

<body>
<p><a class="i-multi-choice-arrow" onclick="$('#musique').show();">Choix musique</a>
<br/>	<!-- ici on affiche le texte -->
	<br/><div id="info_msg"></div><div id="musique" style="display:none;">



	<script type="text/x-javascript">
	
		/* cette fonction compte les tags */
		function countTag(tag)
		{
			var allInputs = $(":input"); var j=0;
			for(var i=0; i<allInputs.length; i++)
			{
				ident = allInputs[i].id.split("_");
				if(ident[0]=="musique"&& allInputs[i].checked)j++;
			}
			return j;
		}
		
		/* cette fonction prend le texte de la checkbox */
		function checkTxt()
		{
	
			var allInputs = $(":input");
			var val = "";var ident;var j = 0;
			for(var i=0; i<allInputs.length; i++)
			{
				ident = allInputs[i].id.split("_");
				if(i==0)$('#'+ident[0]+'_msg').html("");
				if(ident[0]=="musique" && allInputs[i].checked)
				{
					j++;
					val += allInputs[i].value + ((j<countTag("musique"))?(', '):(' '));
				}
				$('#'+ident[0]+'_msg').html(val);
			}
			
		}
	</script>
	
	<br/><input type="checkbox" value="choix 1" id="info_1" onchange="checkTxt();"/> choix 1
	<br/><input type="checkbox" value="choix 2" id="info_2" onchange="checkTxt();" /> choix 2 
	
	<br/><input type="button" value="j'ai fait mumique" onclick="$('#musique').hide();" /> </div>
 	</p>
    <br /><br />
    
   <p><a class="i-multi-choice-arrow" onclick="$('#film').show();">Choix film</a>
<br/>	<!-- ici on affiche le texte -->
	<br/><div id="info_msg"></div><div id="film" style="display:none;">

<script language="javascript"> 
	
		/* cette fonction compte les tags */
		function countTag(tag)
		{
			var allInputs = $(":input"); var j=0;
			for(var i=0; i<allInputs.length; i++)
			{
				ident = allInputs[i].id.split("_");
				if(ident[0]=="film"&& allInputs[i].checked)j++;
			}
			return j;
		}
		
		/* cette fonction prend le texte de la checkbox */
		function checkTxt()
		{
	
			var allInputs = $(":input");
			var val = "";var ident;var j = 0;
			for(var i=0; i<allInputs.length; i++)
			{
				ident = allInputs[i].id.split("_");
				if(i==0)$('#'+ident[0]+'_msg').html("");
				if(ident[0]=="info" && allInputs[i].checked)
				{
					j++;
					val += allInputs[i].value + ((j<countTag("film"))?(', '):(' '));
				}
				$('#'+ident[0]+'_msg').html(val);
			}
			
		}
	</script>
	
	<br/><input type="checkbox" value="choix 1" id="info_1" onchange="checkTxt();"/> choix 1
	<br/><input type="checkbox" value="choix 2" id="info_2" onchange="checkTxt();" /> choix 2 
	
	<br/><input type="button" value="j'ai fait mon film" onclick="$('#film').hide();" /> </div>
 	</p>
 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</body>
</html>
